<template>
	<view class="chains-page">
		<view v-if="cityList.length">
			<view class="citys">
				<view class="citys-item " :class="currentCity==item.name?'current-city':''"
					v-for="(item,index) in cityList" :key="index" @click="changeCity(item.name,index)">
					{{item.name}}
				</view>
			</view>
			<view class="" v-if="cinemaCode &&includesCinema() ">
				<view class="cinema current-cinema" @click="back()">
					<view class="title">
						当前影院
					</view>
					<view class="info">
						<view class="info-content">
							<view>
								{{ currentInfo.CinemaName || currentInfo.cinemaName}}
							</view>
							<view class="desc">
								{{currentInfo.cinemaAddress}}
							</view>
							<view class="desc" @click.stop="callCinema(currentInfo.cinemaPhone)">

								{{currentInfo.cinemaPhone}}
							</view>
						</view>
						<view class="info-location"
							@click.stop="openLocation(currentInfo.latitude,currentInfo.longitude,currentInfo.cinemaName)">

							<text
								v-if="userLocation.latitude">{{getDistance(currentInfo.latitude,currentInfo.longitude) }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="cityList[currentCityIndex]">
				<view v-for="(item,index) in cityList[currentCityIndex].cinemas" :key="index">
					<view class="cinema current-cinema" style="background-color: #fff;"
						v-if="item.cinemaName !=currentInfo.cinemaName && item.cinemaName !=currentInfo.CinemaName"
						@click="changeCinema(item)">
						<view class="info">
							<view class="info-content">
								<view>
									{{item.cinemaName}}
								</view>
								<view class="desc">

									{{item.cinemaAddress}}
								</view>
								<view class="desc" @click.stop="callCinema(item.cinemaPhone)">

									{{item.cinemaPhone}}
								</view>
							</view>
							<view class="info-location"
								@click.stop="openLocation(item.latitude,item.longitude,item.cinemaName)">

								<text v-if="userLocation.latitude">{{getDistance(item.latitude,item.longitude) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="cinema current-cinema" v-if="cinemaCode" @click="back()">
				<view class="title">
					当前影院
				</view>
				<view class="info">
					<view class="info-content">
						<view>
							{{ currentInfo.CinemaName || currentInfo.cinemaName}}
						</view>
						<view class="desc">

							{{currentInfo.cinemaAddress}}
						</view>
						<view class="desc" @click.stop="callCinema(currentInfo.cinemaPhone)">

							{{currentInfo.cinemaPhone}}
						</view>
					</view>
					<view class="info-location"
						@click.stop="openLocation(currentInfo.latitude,currentInfo.longitude,currentInfo.cinemaName)">

						<text
							v-if="userLocation.latitude">{{getDistance(currentInfo.latitude,currentInfo.longitude) }}</text>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in chainsList" :key="index">
				<view class="cinema current-cinema" style="background-color: #fff;" @click="changeCinema(item)">
					<view class="info">
						<view class="info-content">
							<view>
								{{item.cinemaName}}
							</view>
							<view class="desc">

								{{item.cinemaAddress}}
							</view>
							<view class="desc" @click.stop="callCinema(item.cinemaPhone)">

								{{item.cinemaPhone}}
							</view>
						</view>
						<view class="info-location"
							@click.stop="openLocation(item.latitude,item.longitude,item.cinemaName)">

							<text v-if="userLocation.latitude">{{getDistance(item.latitude,item.longitude) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		getChains,
		queryCinema,
		getCinemaInfo,
		queryUserInfo,
	} from '../../common/http/api';

	import QQMapWX from '@/common/utils/qqmap-wx-jssdk.min.js'


	var qqmapsdk;
	export default {
		data() {
			return {
				cinemaCode: '',
				userLocation: {},
				currentInfo: {},
				chainsList: [],
				allList: [],
				currentCity: '',
				cityList: [],
				currentCityIndex: 0
			}
		},
		methods: {
			getChains() {

				getChains().then(res => {
					this.allList = res.data
					const index = res.data.findIndex(item => item.cinemaCode == this.cinemaCode)
					if (index != -1) {
						this.currentInfo = res.data[index]
						res.data.map(item => {
							//&& item.cinemaCode != this.cinemaCode
							if (item.chainsType == res.data[index].chainsType) {
								this.chainsList.push(item)
							}
						})
						this.chainsList.sort((a, b) => this.sortDistance(a.latitude, a.longitude) - this
							.sortDistance(b.latitude, b.longitude))
						this.filterCityCinema()
					} else {

						this.queryInfo()
					}


				})
			},
			getLocation(lat, lon, name) {

				qqmapsdk = new QQMapWX({
					key: 'B5MBZ-OIY6J-WEGFA-DDVLC-53AZ3-R5BMV'
				});
				uni.getLocation({
					success: res => {
						this.userLocation = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						qqmapsdk.reverseGeocoder({
							sig: 'dMEAYmKPDU3T8J7yBRuvfwmFbZIANFPi', // 必填
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res) => {

								if (!this.currentCity) {
									this.currentCity = res.result.address_component.city;
								}

								if (lat) {
									const latitude = parseFloat(lat)
									const longitude = parseFloat(lon)
									uni.openLocation({
										latitude,
										longitude,
										scale: 18,
										name
									})
								}

							}

						})
					},

				})
			},
			filterCityCinema() {

				if (this.cityList.length) return

				this.chainsList.map(item => {
					const index = this.cityList.findIndex(city => city.name == item.city)
					if (index == -1) {
						this.cityList.push({
							name: item.city,
							cinemas: [item]
						})
					} else {
						this.cityList[index].cinemas.push(item)
					}

				})

				this.currentCityIndex = this.cityList.findIndex(city => city.name == this.currentCity);
				if (this.currentCityIndex == -1) {
					this.currentCityIndex = 0
					this.currentCity = this.cityList[0].name
				}

			},
			changeCity(name, index) {
				this.currentCity = name;
				this.currentCityIndex = index;


			},
			back() {
				uni.navigateBack()
			},
			openLocation(lat, lon, name) {
				this.getLocation(lat, lon, name)

			},
			callCinema(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			Rad(d) {
				//根据经纬度判断距离
				return d * Math.PI / 180.0;
			},
			changeCinema(cinema) {

				uni.setStorageSync('cinemaCode', cinema.cinemaCode)
				uni.setStorageSync('currentCityName', this.currentCity)
				uni.reLaunch({
					url: '../../pages/index/index'
				})

			},
			queryInfo() {
				getCinemaInfo().then(res => {
					const _cinemaCode = res.cinemaCode
					const index = this.allList.findIndex(item => item.cinemaCode == _cinemaCode)
					if (index != -1) {

						const fristCinema = this.allList[index]
						// this.chainsList.push(fristCinema)   && item.cinemaCode != fristCinema.code

						this.allList.map(item => {
							if (item.chainsType == fristCinema.chainsType) {
								this.chainsList.push(item)
							}
						})
						this.chainsList.sort((a, b) => this.sortDistance(a.latitude, a.longitude) - this
							.sortDistance(b.latitude, b.longitude))
						this.filterCityCinema()


					} else {

						if (this.cinemaCode) {
							this.currentInfo = res

						} else {
							this.chainsList.push(res)
						}
						if (!this.cinemaCode) {
							uni.switchTab({
								url: "../index/index"
							})
						}

					}

				})
			},
			checkAuth() {
				uni.getSetting({
					success: (res) => {
						// res.authSetting['scope.userLocation'] === undefined  表示 初始化进入，从未授权
						// res.authSetting['scope.userLocation'] === true       表示 已授权
						// res.authSetting['scope.userLocation'] === false      表示 授权拒绝
						if (res.authSetting['scope.userLocation'] === true) {
							this.getLocation();
						}
					}
				})

			}
		},
		onLoad(options) {
			this.cinemaCode = options.cinemaCode
			this.currentCity = uni.getStorageSync('currentCityName')
			this.checkAuth();
			this.getChains()
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})

		},
		computed: {

			getDistance() {
				return (lat2, lng2) => {
					var radLat1 = this.Rad(this.userLocation.latitude);
					var radLat2 = this.Rad(lat2);
					var a = radLat1 - radLat2;
					var b = this.Rad(this.userLocation.longitude) - this.Rad(lng2);
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(
							radLat2) * Math
						.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;
					s = (Math.round(s * 10000) / 10000).toFixed(1);

					return s ? s > 10 ? '>10km' : s + 'km' : ''
					// return s

				}
			},
			sortDistance() {
				return (lat2, lng2) => {
					var radLat1 = this.Rad(this.userLocation.latitude);
					var radLat2 = this.Rad(lat2);
					var a = radLat1 - radLat2;
					var b = this.Rad(this.userLocation.longitude) - this.Rad(lng2);
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(
							radLat2) * Math
						.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;
					s = Math.round(s * 10000) / 10000;
					return s
				}
			},
			includesCinema() {
				return () => {

					return uni.getStorageSync('currentCityName') == this.currentCity ? true : false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chains-page {
		min-height: 100vh;
		background-color: #f0f0f5;

		.citys {
			background-color: #fff;
			margin-bottom: 30rpx;
			padding: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.citys-item {
				padding: 10rpx 30rpx;
				color: #999;
				border: 1px solid #999;
				margin-right: 15rpx;
				border-radius: 35rpx;
				font-size: 30rpx;
			}

			.current-city {
				color: #d16375;
				border: #d16375 1px solid;
			}
		}

		.cinema {
			background-color: #fff;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-content {
					.desc {
						color: #999;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
				}

				.info-location {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}

		.current-cinema {
			background-color: #f3ebe0;

			.title {
				color: #d16375;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>